<link rel="stylesheet" type="text/css" href="lib/jquery/css/jquery.tabs.css">
<link rel="stylesheet" type="text/css" href="lib/jquery/css/jquery.tabs-ie.css">
<link rel="stylesheet" type="text/css" href="lib/jquery/css/flexigrid/flexigrid.css">
<link rel="stylesheet" type="text/css" href="lib/jquery/css/jqueryFileTree.css"/>

<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script src="lib/jquery/jquery.easing.1.1.js" type="text/javascript"></script>
<script src="lib/jquery/jqueryFileTree.js" type="text/javascript"></script>

<script type="text/javascript" src="lib/jquery/flexigrid.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.tabs.js"></script>
<style>

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}	
</style>
<div id="right" style="background:#ffffff">

	<h2><span>information of the invention</span></h2>
	<div style="padding:5px; padding-top:10px;">
		<table id="flex1" >
			<thead>
		    	<tr>
		           	<th width="200">Category</th>
		        	<th width="300">Value</th>
		       	</tr>
		    </thead>
			<tr>
		    	<td width="150">Title</td>
		      	<td width="200"><? print $invention['Title'] ?></td>
			</tr>
			<tr>
		    	<td width="150">Docket</td>
		      	<td width="200"><? print $invention['Docket'] ?></td>
			</tr>
			<tr>
		    	<td width="150">Key Words</td>
		      	<td width="200"><? print $invention['KeyWords'] ?></td>
			</tr>
			<tr>
		    	<td width="150">Type</td>
		      	<td width="200"><? print $GLOBALS["InventionType"][$invention['Type']] ?></td>
			</tr>
			<tr>
		    	<td width="150">Status</td>
		      	<td width="200"><? print $GLOBALS["InventionStatus"][$invention['Status']] ?></td>
			</tr>
		</table><br><br>
	</div>
	<h2><span>Date Information</span></h2>
	<div style="padding:5px; padding-top:10px;">
		<table id="dateInformation" >
			<thead>
				<tr>
				 	<th width="200">Category</th>
				   	<th width="300">Value</th>
				</tr>
			</thead>
			<tr>
				<td width="150">Invented Date</td>
				<td width="200"><? print $invention['Invented'] ?></td>
			</tr>
			<tr>
			   	<td width="150">Created Date</td>
			   	<td width="200"><? print $invention['Created'] ?></td>
			</tr>
			<tr>
			   	<td width="150">PF Date</td>
			   	<td width="200"><? print $invention['PFDate'] ?></td>
			</tr>
			<tr>
			   	<td width="150">UF Date</td>
			   	<td width="200"><? print $invention['UFDate'] ?></td>
			</tr>
			<tr>
			   	<td width="150">Issue Date</td>
			   	<td width="200"><? print $invention['IssueDate'] ?></td>
			</tr>
			<tr>
			   	<td width="150">Target Date</td>
			   	<td width="200"><? print $invention['TargetDate'] ?></td>
			</tr>
			<tr>
			   	<td width="150">Published Date</td>
			   	<td width="200"><? print $invention['Published'] ?></td>
			</tr>
		</table>
	</div>
	<h2><span>Actions Information</span></h2>
	<div class="example">
			<h3>Default options</h3>

			<div id="fileTreeDemo_1" class="demo"></div>
		</div>
	
</div>
<script type="text/javascript">
	$('#container-1').tabs();
	$("#flex1").flexigrid({height:'auto',striped:true,width:'530'});
	$("#dateInformation").flexigrid({height:'auto',striped:true,width:'530'});
	
	$('#fileTreeDemo_1').fileTree({ root: '/', script: 'jqueryFileTree.php' }, function(file) { 
					alert(file);
				});
	
</script>